<template>
  <div style="margin: 0 300px; text-align: center">
    {{ form }}
    <ElForm>
      <ElFormItem label="数组对象">
        <ArrObject
          v-model="form.arrObj"
          :sel-options="[
            {
              label: '静配中心 调配间每日清场清洁消毒检查表',
              value: '静配中心 调配间每日清场清洁消毒检查表',
            },
            {
              label: '温湿度表单1',
              value: '温湿度表单1',
            },
            {
              label: '温湿度表单2',
              value: '温湿度表单2',
            },
            {
              label: '温湿度表单3',
              value: '温湿度表单3',
            },
          ]"
        />
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ArrObject from '@/components/ArrObject.vue'

const form = ref<{
  arrObj: Array<{
    formId: string
    multipleTime: string | Array<{ startTime: string; endTime: string }>
    submitCount: number
  }>
}>({
  arrObj: [
    {
      formId: '静配中心 调配间每日清场清洁消毒检查表',
      multipleTime: [
        { startTime: '09:22:01', endTime: '10:22:01' },
        { startTime: '09:19:08', endTime: '10:22:08' },
      ],
      submitCount: 2,
    },
    {
      formId: '温湿度表单1',
      multipleTime: [
        { startTime: '09:22:03', endTime: '10:22:03' },
        { startTime: '09:35:07', endTime: '10:35:07' },
      ],
      submitCount: 1,
    },  
    {
      formId: '温湿度表单2',
      multipleTime: [{ startTime: '09:22:05', endTime: '10:22:05' }],
      submitCount: 3,
    },
    {
      formId: '温湿度表单3',
      multipleTime: [
        { startTime: '09:22:06', endTime: '10:22:06' },
        { startTime: '09:35:16', endTime: '10:35:16' },
        { startTime: '09:35:16', endTime: '10:35:16' },
      ],
      submitCount: 4,
    },
  ],
})
</script>

<style scoped></style>
